<template>
  <!-- 自定义弹窗 -->
  <el-dialog v-bind="customizedAttrs" v-on="$listeners">
    <div slot="title">
      {{ title
      }}<span class="title-tip">{{ titleTip }}</span>
    </div>
    <div
      class="content"
      :style="{ padding: customPadding }"
    >
      <slot></slot>
    </div>
    <div class="footer" v-if="hasFooter">
      <slot name="footer"></slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'customizeDialog',
  props: {
    title: {
      type: String,
      default: '审核记录'
    },
    titleTip: {
      type: String,
      default: ''
    },
    // isShow:{
    //     type:Boolean,
    //     default:false
    // }
    hasFooter: {
      type: Boolean,
      default: true
    },
    customPadding: {
      type: String,
      default: '30px 20px'
    },
    width: {
      type: String,
      default: '600px'
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  watch: {
    visible: (val) => {
      this.$emit('update:visible', val)
    }
  },
  computed: {
    customizedAttrs() {
      return Object.assign(
        {
          title: this.title,
          width: this.width
        },
        this.$attrs
      )
    }
  },
  methods: {
    handleOpen() {
      this.isShow = true
    },
    handleClose() {
      this.isShow = false
      // this.$emit('changeIsShow',false)
    },
    handleSumbit() {
      this.$emit('cb')
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
::v-deep .title {
  color: #fff;
  &-tip {
    margin-left: 40px;
  }
}
::v-deep .el-dialog__header {
  background: #597182;
  padding: 0;
  height: 48px;
  display: flex;
  padding: 0 20px;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 16px;
  .el-dialog__headerbtn {
    position: relative;
    top: 0;
    right: 0;
  }
  .el-dialog__title {
    color: #ffffff;
  }
}
::v-deep .el-dialog__body {
  padding: 0;

  .content {
    // padding: 30px 20px;
  }
  .footer {
    max-height: 70px;
    display: flex;
    border-top: 1px solid #f1f1f1;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    .el-button--default {
      color: #497fa3;
      border: 1px solid #497fa3;
    }
    .el-button--primary {
      margin: 15px 10px;
      background: #497fa3;
      border: 1px solid #497fa3;
    }
  }
}

.cancel {
  width: 80px;
  height: 34px;
  border: 1px solid #497fa3;
  font-size: 14px;
  font-weight: 400;
  color: #497fa3;
}
.sumbit {
  width: 80px;
  height: 34px;
  background: #497fa3;
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}
</style>
